<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <style>
        div{
            transform: translateX(100px);
        }
        div{
    border-radius: 10px;
    border: 2px solid pink;
    width:800px;
}
    </style>
</head>
<body>
    <form action="/getData" method="get">
        <input type="text" name="Name" id="Name" maxlength="10">
        <input type="text" name="Age" id="Age">
    
        <input type="submit" value="提交">
    </form></br>
    <form action="/uploadFile" method="post" enctype="multipart/form-data">
        <input type="file" name="image" id="image" multiple> 
        <input type="submit" value="提交">
    </form>
    multipartyUploadImg: </br>
    <form action="/multipartyUploadImg" method="post" enctype="multipart/form-data">
        <input type="file" name="image" id="image" multiple> 
        <input type="submit" 
        ="提交">
    </form>

    <button class="ags">ajax-get-submit</button>
    <button class="aps">ajax-post-submit</button><br>

    <textarea name="tarea" id="tarea" cols="30" rows="10"></textarea><br>

    <input type="file" id="files" onchange="change()" multiple><br>
    <input type="file" id="files2" onchange="change2()" multiple><br>
    <input type="text" class="textA" ><br>

    <table>
        <th>id</th>
        <th>title</th>
        <th>author</th>
        <th>age</th>
        <th>date</th>
    </table>
    <img src="2.png" alt="">

    <button id="disconnect">disconnect</button>
    <div id="result"></div>

    <a href="./public/dist.html">baidu</a>

</body>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.dev.js"></script>
<script>
    $(".textA").on("change",()=>{
        console.log($(".textA").val())
        var data = {Name:"getTim",Age:"100",title:$(".textA").val()};
        $.get("http://127.0.0.1:8081/getData",data,function(data){
            console.log(data);
            $("table td").parent("tr").remove();
            for (const index in data.getData) {
                $("table").append("<tr><td>"+data.getData[index].runoob_id+"</td>"+"<td>"+data.getData[index].runoob_title+"</td>"+"<td>"+data.getData[index].runoob_author+"</td>"+"<td>"+data.getData[index].runoob_age+"</td>"+"<td>"+data.getData[index].submission_date+"</td></tr>");
            }
            $("#tarea").val(data.toString());
        })
    })

    $(".aps").on("click",()=>{
        var data = {Name:"postTim",Age:"100"};
        $.post("http://127.0.0.1:8081/postData",data,function(data){
            // console.log(data);
            $("#tarea").val(data.toString());
        })
    })

    function change(){
        console.log("change")
        var files = $("#files")[0].files;
        console.log(files)
        var formData = new FormData();
        for (const index in files) {
            formData.append("files1",files[index]);
        }
        console.log(formData)
        $.ajax({
            url:"http://127.0.0.1:8081/ajaxUpload",
            type:"post",
            data:formData,
            contentType:false,
            processData: false,
            success:function(res){
                console.log(res)
            }
        })
    }


    function change2(){
        document.cookie = "name=abcTim";
        console.log("change")
        var files = $("#files2")[0].files;
        console.log(files)
        var formData = new FormData();
        for (const index in files) {
            formData.append("image",files[index]);
            formData.append("userName","Tim");
        }
        console.log(formData)
        $.ajax({
            url:"http://127.0.0.1:8081/formidable",
            type:"post",
            data:formData,
            contentType:false,
            processData: false,
            success:function(res){
                console.log(res)
            }
        })
    }


//创建Socket.IO实例，建立连接

var socket = io.connect('http://localhost:8081');

// 添加一个连接监听器
socket.on('connect',function() { 
  console.log('Client has connected to the server!'); 
});

// 添加一个连接监听器
socket.on('message',function(data) { 
  document.getElementById("result").innerHTML+=data + "<br />";
 
});

// 添加一个关闭连接的监听器
$("#disconnect").click(()=>{
    console.log('disconnected!'); 
    sendMessageToServer(ms);
    socket.on('disconnect',function() { 
      console.log('The client has disconnected!'); 
    }); 
})

// 通过Socket发送一条消息到服务器
function sendMessageToServer(message) { 
  socket.send(message); 
}
var date = new Date();
var ms="Time: "+date.toString()+"Today is a nice day1, wish you happy";
// sendMessageToServer(ms)
// setInterval("sendMessageToServer(ms)",1000);

</script>
</html>